<template>
  <el-dialog :visible.sync="visible" width="70%" custom-class="default-dialog map-service-dialog"
    :close-on-click-modal="false" @close="cancel" append-to-body>
    <div slot="title">
      <img :src="require(`@/assets/img/map.png`)" alt="">
      <span>{{ title }} </span>
    </div>
    <el-transfer
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入服务名称"
      v-model="mapList"
      :titles="['待授权服务','已授权服务']"
      :props="{
        key: 'mapServiceGuid',
        label: 'mapServiceName'
      }"
      :right-default-checked="rightDefaultCheckedList"
      :data="list"
      @change="handleChange">
    </el-transfer>
    <span slot="footer">
      <el-button size="small" @click="cancel">取 消</el-button>
      <el-button size="small" type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      title: '数据服务权限',
      list: [],
      mapList: [],
      guid: null,
      rightDefaultCheckedList: []
    };
  },
  methods: {
    showModal(row) {
      this.visible = true
      this.guid = row.userGuid
      this.getMapServiceListInit()
      this.getUserMapServiceListInit(row.userGuid)
    },
    // 获取所有地图服务
    getMapServiceListInit(){
      let params = {
        size: 1000,
        page: 1,
        mapServiceState: 1
      }
      this.$api.getMapServiceList(params).then((res) => {
        if(res && res.code == 200){
          let data = res.data || {}
          this.list = data.list || []
        }
      })
    },
    // 获取已授权地图服务权限
    getUserMapServiceListInit(guid){
      this.$api.getUserMapService({ userGuid: guid }).then(res => {
        if(res && res.code == 200){
          let data = res.data || []
          let mapList = []
          data.forEach(l => {
            mapList.push(l.mapServiceGuid)
          })
          this.mapList = mapList
        }
      })
    },
    filterMethod(query, item) {
      return item.mapServiceName.indexOf(query) > -1;
    },
    // 右移时选中右移数据
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
      if(direction == 'right'){
        this.rightDefaultCheckedList = movedKeys
      }
    },
    // 确定
    sure() {
      let params = {
        mapServiceGuids: this.mapList,
        userGuid: this.guid
      }
      this.$api.setUserMapService(params).then(res => {
        if(res && res.code == 200){
          this.$notify.success({
            title: '成功',
            message: '数据保存成功'
          });
          this.visible = false
        }
      })
    },
    // 取消
    cancel() {
      this.visible = false;
    },
  }
};
</script>
<style lang="less">
.default-dialog.map-service-dialog{
  .el-transfer{
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-transfer-panel{
      flex: 1;
    }
  }
  
}
</style>
